<template>
	<view class="content-box">
		<image class="bg" src="/static/me/bg.png" mode="widthFix"></image>
		<view style="position: relative;z-index: 9;">
			<view class="filtrate-box">
				<view class="" @click="setCarShow()">
					<text style="padding-right: 6rpx;">{{carValue.text||'全部车型'}}</text>
					<u-icon name="arrow-down-fill" size="16rpx"></u-icon>
				</view>
				<view :class="{'active-filtrate':dropdownIndex===2}" @click="setDropdownIndex(2)">
					距离最近
				</view>
				<view :class="{'active-filtrate':dropdownIndex===3}" @click="setDropdownIndex(3)">
					价格降序
				</view>
				<view :class="{'active-filtrate':dropdownIndex===4}" @click="setDropdownIndex(4)">
					价格升序
				</view>
				<view class="" @click="screenShow=true">
					筛选
				</view>
			</view>
			<view class="popup" :class="{'active-centent':carShow}">
				<view class="first">

				</view>
				<view class="rent-type">
					<view v-for="item in carList" hover-class="hover_" @click="setCarValue(item)">
						{{item.text}}
					</view>
				</view>
			</view>
		</view>
		<u-overlay :show="carShow" @click="carShow = false" zIndex="5"></u-overlay>
		<scroll-view @refresherrefresh="refresherpulling" @scrolltolower="upData()" refresher-enabled :refresher-triggered='refresherTriggered'
			scroll-y="true" style="height: calc(100vh - 290rpx);">
			<view style="background-color: #f5f5f5;padding: 20rpx 0;min-height: calc(100% - 40rpx);">
				<view class="card" v-for="item in list"
					@click="$routeTo('/pages/orderDetails/orderDetails?id='+item.id)">
					<view class="top-box">
						<image src="/static/time.png" mode=""></image>
						<view style="flex: 1;">
							上门时间:{{item.expectPickTime}}
						</view>
						<view class="">
							托运距离{{item.mileage}}km
						</view>
					</view>
					<view class="type-box">
						<view class="">
							{{item.driverTypeName}}
						</view>
						<view class="type" :class="{'type_':item.payStatus!=2}">
							{{item.payStatusDescription}}
						</view>
					</view>

					<view class="place">
						<view class="">
							{{item.startCityName}}{{item.startAreaName}}
						</view>
						<image src="/static/car.png" mode="heightFix"></image>
						<view class="">
							{{item.endCityName}}{{item.endAreaName}}
						</view>
					</view>

					<view class="specification-box">
						<view class="specification-item">
							<view class="title-box">
								<image src="/static/petNum.png" mode="widthFix"></image>
								<text>宠物数量</text>
							</view>
							<view class="value-box">
								<view class="" v-for="items in item.petInfo">
									{{items.name}}*{{items.count}}
								</view>
							</view>
						</view>
						<view class="specification-item">
							<view class="title-box">
								<image src="/static/boxNum.png" mode="widthFix"></image>
								<text>空间大小</text>
							</view>
							<view class="value-box">
								<view class="" v-for="items in item.cageInfo">
									{{items.name}}*{{items.count}}
								</view>
							</view>
						</view>
						<view class="specification-item">
							<view class="title-box">
								<image src="/static/freight.png" mode="widthFix"></image>
								<text>运费(含服务费)</text>
							</view>
							<view class="value-box">
								<view class="">
									￥{{item.freightCharge}}
								</view>
							</view>
						</view>
						<view class="specification-item">
							<view class="title-box">
								<image src="/static/serviceCharge.png" mode="widthFix"></image>
								<text>服务费</text>
							</view>
							<view class="value-box">
								<view class="">
									￥{{item.serviceCharge}}
								</view>
							</view>
						</view>
					</view>
					<view class="btn-box" @click.stop="accept(item.id)">
						<view class="">
							抢单
						</view>
					</view>

				</view>
				<u-empty v-if="list.length===0" text="暂无可抢订单" marginTop="250rpx"
					icon="http://cdn.uviewui.com/uview/empty/order.png">
				</u-empty>
			</view>
		</scroll-view>

		<u-popup :show="screenShow" @close="screenShow=false" round="40rpx">
			<screenPopup @submit="submitScreen" />
		</u-popup>
		<u-popup :show="upgradeShow" @close="upgradeShow=false" round="40rpx" mode="center">
			<view class="" style="display: flex;flex-direction: column;align-items: center;text-align: center;">
				<view class="title" style="margin-top: 64rpx;">
					当前车型：{{userUpgrade.driverLevelName||'暂无等级'}}
				</view>
				<view style="margin: 40rpx 0;">
					<u-icon name="arrow-downward" size="60rpx" color="#FFCE4E"></u-icon>
				</view>


				<view class="" style="text-align: center;">
					升级为 "<text style="color: #FFCE4E;">{{userUpgrade.orderLevelName}}</text>" 既可接单
				</view>

				<view style="display: flex;justify-content: space-between;padding: 20rpx 40rpx;">
					<view class="succeed-btn" style="filter: grayscale(100%);width: 220rpx;margin-right: 40rpx;"
						@click="upgradeShow=false">
						暂不升级
					</view>
					<view class="succeed-btn" style="width: 220rpx;"
						@click="$routeTo('/pages/me/upgradeVehicle/upgradeVehicle')">
						确认升级
					</view>
				</view>
			</view>

		</u-popup>



		<u-popup :show="succeedShow" round="40rpx">
			<view class="succeed-text-box">
				<image src="../../static/success-ico.png" mode=""></image>
				<view class="succeed-text">
					<view class="">
						接单成功！
					</view>
					<view class="">
						请到底部导航“进行中”查看
					</view>
				</view>
			</view>

			<image src="/static/tabber_ico.png" mode="widthFix" style="width: 696rpx;margin: 0 auto;"></image>


			<view class="check-box" @click="check=!check">
				<view class="check" :style="{background: check?'#FFCE4E':'#E6E6E6'}">
					<u-icon name="checkbox-mark" color="#ffffff" v-if="check"></u-icon>
				</view>
				<view class="" style="border-bottom: 2px solid #A8A8A8;padding: 4rpx 0;">
					以后不再提示
				</view>
			</view>
			<view class="succeed-btn" @click="setSucceedShow">
				确定
			</view>
		</u-popup>
		<Loading />

	</view>
</template>

<script>
	import screenPopup from './screenPopup.vue'
	let addressLat = null
	let addressLng = null
	export default {
		components: {
			screenPopup
		},
		data() {
			return {
				dropdownIndex: '',
				carList: [{
					text: '全部车型',
					value: ''
				}, {
					text: '商务专车',
					value: 5
				}, {
					text: '专车',
					value: 4
				}, {
					text: '速拼',
					value: 3
				}, {
					text: '拼车',
					value: 2
				}],
				carValue: {},
				carShow: false,
				screenShow: false,

				upgradeShow: false,

				screenData: {},
				page: 1,
				list: [],
				succeedShow: false,
				check: uni.getStorageSync("succeedPopupCheck") || false,
				userUpgrade: {},
				refresherTriggered: false
			}
		},
		mounted() {


		},
		onShow() {
			let that = this
			uni.getLocation({
				type: 'wgs84',
				success: function(res) {
					console.log('当前位置的经度：' + res.longitude);
					console.log('当前位置的纬度：' + res.latitude);
					addressLat = res.latitude
					addressLng = res.longitude
					that.upData()
				},
				fail() {
					that.upData()
					// uni.showModal({
					// 	title: '提示',
					// 	content: '获取位置失败，请手动选择',
					// 	success: function(res) {
					// 		if (res.confirm) {
					// 			that.getAddressMap()
					// 		} else if (res.cancel) {
					// 			uni.switchTab({
					// 				url: '/pages/index/index'
					// 			})
					// 		}
					// 	}
					// });
				}
			});
		},

		methods: {
			refresherpulling() {
				this.refresherTriggered = true
				this.page=1
				this.list=[]
				this.upData()
			},
			setSucceedShow() {
				console.log('???')
				this.succeedShow = false
				uni.setStorageSync('succeedPopupCheck', this.check);
			},
			setCarShow() {
				this.carShow = true
			},
			setDropdownIndex(index) {
				this.dropdownIndex = this.dropdownIndex === index ? '' : index
				this.page=1
				this.list=[]
				this.upData()
			},
			setCarValue(item) {
				this.carValue = item
				this.carShow = false
				this.page=1
				this.list=[]
				this.upData()
			},
			upData() {
				if (this.page == 0) return ;
				let data = {
					addressLng,
					addressLat,
					driverTypeLevel: this.carValue.value,
					mutuallyExclusiveCondition: this.dropdownIndex,
					page: this.page,
					size: 10,
					...this.screenData
				}
				this.$myRequest('/api/driver/order/v1/page', data, 'POST').then(res => {
					this.refresherTriggered = false
					let data = res.data.data || []
					this.list.push(...data)
					if (data.length === 10) {
						this.page += 1
					} else {
						this.page = 0
					}
				})
			},
			submitScreen(data) {
				console.log(data)
				this.screenData = data
				
				this.page=1
				this.list=[]
				this.upData()
				this.screenShow = false
			},
			accept(orderId) {
				this.$myRequest('/api/driver/order/v1/grab', {
					orderId
				}, 'POST').then(res => {
					this.userUpgrade = res.data
					if (res.data.orderLevelName) return this.upgradeShow = true;
					this.page=1
					this.list=[]
					this.upData()
					if (this.check) return;
					this.succeedShow = true
				})
			}
		}
	}
</script>

<style lang="scss">
	.content-box {
		padding-top: 200rpx;

		.bg {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
		}

		.succeed-text-box {
			display: flex;
			justify-content: center;
			padding: 46rpx 0 22rpx 0;

			image {
				width: 158rpx;
				height: 144rpx;
				margin-right: 12rpx;
			}

			.succeed-text {
				display: flex;
				flex-direction: column;
				justify-content: center;

				font-size: 32rpx;
				color: #333333;
				font-weight: 700;

				view:nth-child(2) {
					font-size: 24rpx;
					color: #999999;
					margin-top: 14rpx;
					font-weight: 100;
				}
			}

		}

		.check-box {
			display: flex;
			justify-content: center;
			font-size: 24rpx;
			color: #999999;
			align-items: center;

			.check {
				width: 40rpx;
				height: 40rpx;
				border-radius: 12rpx;
				margin-right: 10rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}

		.succeed-btn {
			width: 338rpx;
			height: 80rpx;
			background: #FFCE4E;
			border-radius: 40rpx;
			font-size: 28rpx;
			line-height: 80rpx;
			color: #FFFFFF;
			text-align: center;
			margin: 46rpx auto;
		}

	}

	.filtrate-box {
		background-color: #ffffff;
		display: flex;
		justify-content: space-between;
		font-size: 28rpx;
		color: #333333;
		padding: 14rpx 20rpx 38rpx 20rpx;
		box-shadow: 0rpx 6rpx 12rpx rgba(184, 184, 184, 0.16);

		view {
			display: flex;
			align-items: center;
		}

		.active-filtrate {
			font-weight: bold;
			color: #000000;
		}
	}

	.popup {
		position: absolute;
		top: 120rpx;
		left: 50%;
		max-height: 0;
		overflow: hidden;
		opacity: 0;
		z-index: -1;
		transform: translateX(-50%);
		width: calc(100vw - 80rpx);

		background-color: #ffffff;
		border-radius: 12rpx;
		padding: 20rpx 0;
		transition: all .6s;
		box-shadow: 0rpx 0 12rpx rgba(175, 175, 175, 0.16);

		.rent-type {
			>view {
				height: 70rpx;
				line-height: 70rpx;
				padding: 0 40rpx;
			}

			.hover_ {
				background: #f5f5f5;
			}
		}

		.first {
			width: 0;
			height: 0;
			border-top: 20rpx solid transparent;
			border-right: 20rpx solid transparent;
			border-left: 20rpx solid transparent;
			border-bottom: 20rpx solid #ffffff;
			position: absolute;
			top: -39rpx;
			left: 30rpx;
			transition: all .6s;
		}
	}


	.active-centent {
		top: 120rpx;
		max-height: 500rpx;
		transform: translateX(-50%);
		opacity: 1;
		z-index: 8;
	}

	.card {
		padding: 20rpx 40rpx;
		background: #ffffff;
		box-shadow: 0rpx -6rpx 12rpx rgba(175, 175, 175, 0.16);
		margin-bottom: 20rpx;
		animation: appearAn .5s;
		.top-box {
			display: flex;
			align-items: center;

			image {
				width: 26rpx;
				height: 26rpx;
				margin-right: 8rpx;
			}

			font-size: 24rpx;
			color: #333333;
			padding-bottom: 20rpx;
			border-bottom: 2rpx solid #E2E2E2;
		}

		.type-box {
			display: flex;
			align-items: center;
			font-size: 28rpx;
			color: #333333;
			font-weight: bold;
			margin-top: 14rpx;

			.type {
				margin-left: 16rpx;
				padding: 4rpx 16rpx;
				background: linear-gradient(180deg, #DBE4F9 0%, #EEF2FE 100%);
				border-radius: 8rpx;
				font-size: 28rpx;
				color: #779EFF;
				font-weight: 100;
			}

			.type_ {
				background: linear-gradient(180deg, #FEE0D3 0%, #FEF6F2 100%);
				color: #FF7F48;
			}
		}

		.place {
			border: 2rpx dashed rgba(255, 120, 99, 0.651);
			background: linear-gradient(129deg, #FFFFFF 0%, #FFFAD6 49%, #FFFFFF 100%);
			border-radius: 12rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 40rpx;
			margin: 40rpx 0;
			font-size: 32rpx;
			color: #333333;
			font-weight: bold;

			image {
				height: 75rpx;
				width: 65rpx;
			}
		}

		.specification-box {
			display: flex;
			flex-wrap: wrap;
			padding: 0 46rpx;

			.specification-item {
				width: 50%;
				font-size: 26rpx;
				padding-bottom: 40rpx;

				.title-box {
					font-weight: bold;
					color: #333333;
					display: flex;
					align-items: center;

					image {
						width: 32rpx;
						height: 32rpx;
						margin-right: 10rpx;
					}
				}

				.value-box {
					color: #666666;
					padding-left: 40rpx;

					view {
						margin: 10rpx 0;
					}
				}
			}
		}

		.btn-box {
			display: flex;
			justify-content: flex-end;

			view {
				width: 200rpx;
				height: 66rpx;
				background: $theme-color;
				border-radius: 34rpx;
				font-size: 28rpx;
				line-height: 66rpx;
				color: #FFFFFF;
				text-align: center;
			}
		}

	}


@keyframes appearAn {
		0% {
			opacity: 0;
		}
	
		100% {
			opacity: 1;
		}
	}
</style>